<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
	<title><%=ProConfig.PROJECT_NAME %></title>
	<%@ include file="/WEB-INF/wechat/iot/common/resource_lib.jsp"%>
	<script type="text/javascript" src="<%=basePath%>/lib/echarts/echarts.common.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/lib/lpro/echarts.util.js"></script>
	<style type="text/css">
		.title-container{
			height: 50px;
			line-height: 48px;
			text-align: center;
			background: #fff;
		}
		
		.title-container .width20{
			font-weight: 540;
		}
		
		.title-container .width33.active{
			border-bottom: 2px solid #46addb;
			color:#46addb;
		}
		
		.weui-panel.weui-panel_access{
			border-radius: 5px;
		}
		.weui-cells{
			color: #333;
		}
		.weui-cells label{
			font-size: 15px;
		}
		.weui-cells span{
			font-size: 14px;
		}
		#main{
			background: white;
			padding-top: 10px ;
		}
		.span-btn{
			border: 1px solid #aaa;
	    	padding: 1px 8px;
	    	border-radius: 5px;
	    	color:#666;
	    	font-weight: 500 ;
	    	margin-left: 2px;
	    	cursor: pointer;
	    	font-size: 14px;
		}
		.span-btn.active {
			background: #aaa ;
			color: #fff;
		}
		.span-btn1{
	    	padding: 1px 8px;
	    	border-radius: 5px;
	    	font-weight: 500 ;
	    	margin-left: 2px;
	    	cursor: pointer;
	    	font-size: 14px;
	    	color: #3499da;
	    	border: 1px solid  #3499da;
		}
		.span-btn:HOVER{
			background: #aaa ;
			color: #fff;
		}
		.sensor_detail_title{
			padding: 10px 0;
			margin-top:20px;
			background: #fff;
			border-bottom: 1px solid #d9d9d9;
			padding-left: 10px;
		}
		.data-container{
			padding: 10px 15px;
		    border: 1px solid #d9d9d9;
		    margin: 10px 5px;
		    background: #fff;
		    border-radius: 6px;
		}
		.closebtn{
			text-align: center;
		    padding: 10px;
		    background: #3499da;
		    color: #fff;
		    position: fixed;
		    width: 100%;
		    z-index: 100;
		    top: 0;left: 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="t-c title-info" onclick="backup()">
			<span>传感信息</span>
			<div class="back" style=" position: fixed;top: 0px;" >
			返回</div>
		</div>
		<div style="height: 50px;"></div>
		<div class="clear title-container">
			<div class="float-left width33 pointer " url="/wiot/sensor?id=">
				<span>基本信息</span>
			</div>
			<div class="float-left width33 pointer active" url="/wiot/history?id=">
				<span>数据曲线</span>
			</div>
			<div class="float-left width33 pointer" url="/wiot/trigger?id=">
				<span>触发器信息</span>
			</div>
		</div>
		
		<div class="body-container">
			<input type="hidden" id="sensorId">
			
			<div class="sensor_detail_title">
			 	<span class="span-btn" onclick="searchData(this,0);">1H</span>
			 	<span class="span-btn" onclick="searchData(this,1);" >1D</span>
			 	<span class="span-btn" onclick="searchData(this,2);">本月</span>
			 	<span class="span-btn" onclick="searchData(this,3);">上月</span>
			 	
			 	<span class="span-btn1 float-right mr-10 open-popup" data-target="#historydata"
			 			>查看数据</span>
			 </div>
			
			<div id="main" class="jui-echart" style="width: 100%;height:260px;" 
				 	data-options="url:'/page/sensor/history?pageSize=100&paged=1',data:{sensor_id:'$#sensorId$'  } 
				 				,x:'atimestr',y:'sdata',type:'line',id:'main',beforeEchart:'beforeEchart' "   ></div>


			<div id="historydata" class="weui-popup__container">
				<div class="weui-popup__overlay"></div>
				<div class="weui-popup__modal">
					<p class='close-popup closebtn pointer'><i style="color: white;margin-top: -2px;" class="weui-icon-cancel"></i>  返回图表</p>
					<p style=" width: 100%;height: 60px;"></p>
					<div class="content-container">
						
					</div>
					<%@ include file="/WEB-INF/wechat/iot/common/pager.jsp"%>
				</div>
			</div>
			
			<div id="template0" class="hide">
				<div class="data-container clear">
					<span style="color:#3499da;"> {0} </span>
					<span style="color:#999;" class="float-right">{1}</span>
				</div>
			</div>
			
		</div>
		
	</div>

</body>
	<script type="text/javascript">
	function backup(){
		forward('/wiot/device?id='+  GetQueryString("did"));
	}
	$(function(){

		function getData(n){
			postAjax(localUrl+"/page/sensor/history.json?pageSize=15&paged="+n, data,function(data){
				if(isOK(data)){
					var dataT = data.data.data ;
					for(var i=0;i<dataT.length;i++){
						$(".content-container").append( $("#template0").html().format( 
											getStrData(dataT[i].iot_sensor_type,dataT[i].data.measure_unit_type, dataT[i].sdata)
												, time2Str(dataT[i].atime) ) );			
					}
					loading = false;
				}
				// 传data就可以，分页的
				pagerinit(data,".content-container");
			});	
		}
		
		function getStrData(iot_sensor_type ,measure_unit_type,sdata ){
			if( iot_sensor_type == 25 ){
				return sdata + "  "+measure_unit_type ;
			}else{
				return measure_unit_type ;
			}
		}
		
		// 查询条件
		var data = {sensor_id: GetQueryString("id") } ;
		var paged = 1;
		getData(paged++);
		var loading = false;  //状态标记
		$(".weui-popup__modal").infinite().on("infinite", function() {
			if (loading)
				return;
			loading = true;
			setTimeout(function() {
				// 获取商品信息
				getData(paged++);
			}, 500); 
		});
		
	})
	
		$(function(){
			$("#sensorId").val( GetQueryString("id") );
			
			$(".title-container .width33").click(function(){
				forward( $(this).attr("url") + GetQueryString("id")  +"&did="+ GetQueryString("did") );
			})
		})
		
		function beforeEchart(obj,data){
			if(data.length>0){
				if(data[0].iot_sensor_type == 25){
					if(data[0].measure_unit_type == 21){
						obj.yunit='温度';
					}else if(data[0].measure_unit_type == 22){
						obj.yunit='湿度';
					}else if(data[0].measure_unit_type == 23){
						obj.yunit='光照';
					}else if(data[0].measure_unit_type == 71){
						obj.yunit='%';
					}
					obj.yunit_c=data[0].data.measure_unit_type;
				}else if(data[0].iot_sensor_type == 27||data[0].iot_sensor_type == 26){
					var tmp = data[0].data.measure_unit_type_value.split(",");
					obj.yunit='状态';
					obj.stepStyle=true;
					var option ={ yAxis: {
						name:obj.yunit,
						min: tmp[tmp.length-1].split(":")[0] ,
		                max: tmp[0].split(":")[0],
		                axisLabel : {
		                	 formatter:function(value){
		                		 var texts = [];
		                		 for(var i=0;i<tmp.length;i++){
		                			 if(value==tmp[i].split(":")[0]){
			                		 	texts.push(tmp[i].split(":")[1]);
			                		 }
		                		 }
		                		 return texts;
		                	 }
			            }
					}};
					obj.option=option;
				}
			}
			obj.xunit='时间';
			if(validater.empty(obj.option)){
				obj.option = {} ;
			}
			obj.option.dataZoom =  {
                show : false
			}
			return obj;
		}
		
		function searchData(obj,type){
			var object = {
				url:'/list/sensor/history',
				data:{sensor_id:'$#sensorId$'} ,
				x:'atimestr',
				y:'sdata',
				type:'line',
				id:'main',
				beforeEchart:'beforeEchart'	
			} ;
			if(type == 4){
				tip("即将上线");
				return ;
			}else if(type == 0){
				var date = new Date();
				date.setHours(date.getHours()-1);
				object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss")  ;
				object.data["end_time"] =  (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
			}else if(type == 1){
				var date = new Date();
				date.setDate(date.getDate()-1);	
				object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss") ;
				object.data["end_time"] = (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
				object.data.query_interval_type = 2 ;
			}else if(type == 2){
				var date = new Date();
				date.setMonth(date.getMonth()-1);	
				object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss") ;
				object.data["end_time"] =  (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
				object.data.query_interval_type = 3 ;
			}else if(type == 3){
				var date = new Date();
				var lastMonth = new Date();
				date.setMonth(date.getMonth()-2);
				lastMonth.setMonth((new Date()).getMonth()-1);	
				object.data["start_time"] =  date.Format("yyyy/MM/dd hh:mm:ss") ;
				object.data["end_time"] = lastMonth.Format("yyyy/MM/dd hh:mm:ss") ;
				object.data.query_interval_type = 3 ;
			}
			$(".span-btn").removeClass("active");
			$(obj).addClass("active");
			echart(object);
		}

		function echart(object){
			commonAjax( gdv(object.method,"POST") , 
					localUrl + format_property(object.url) , ( (object.method == 'GET')?'': (  objecter( gdv(object.data,{}),'$') )  ) ,function(data){
				if(data.status == status_code.OK){
					var dataTemp ;
					if(validater.empty(data.data)){
						return ;
					} 
					if( format_property(object.url).indexOf("paged")>-1  ){
						dataTemp = data.data.data ;					
					}else{
						dataTemp = data.data ;
					}
					var x_value =[];
					var y_value =[];
					for(var i=0;i< dataTemp.length; i++){
						x_value.push(dataTemp[dataTemp.length-i-1][object.x] );
						y_value.push(dataTemp[dataTemp.length-i-1][object.y])
					}
					object.x=x_value;
					object.y=y_value;
					if(!validater.empty(object.beforeEchart)){
						object = eval('('+ object.beforeEchart+'(object,dataTemp)' +')');
					}
					object.option.dataZoom =  {
		                show : false
					}
					echartInit(object);
					if(!validater.empty(object.success) ){
						object.success();					
					}
				}else{
					$.toptip("该时间段内，暂无数据", 'warning');
				}
			});
		}
		
	</script>
</html>